<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/footer.css" />
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
    <script src="../font/iconfont.js"></script>
</head>

<body>
    <header class="aui-bar aui-bar-nav" style="background:#ccc;" id="header">
        <div class="aui-content">
            <div class="aui-row">
                <div class="aui-col-xs-10 " id="menus" style="background:red;">
                    首页
                </div>
                <div class="aui-col-xs-2 " id="menus-1">
                    购
                </div>
            </div>
        </div>
    </header>

    <!-- <header id="header">
            <div class="header home active">
               <div class="top-menu"></div>
              <div class="add_btn btn" tapmode onclick="fnMore()"></div>
            </div>
        </header> -->
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        fnInit();
        test();
        //  fnChange(0);
    };

    function changeStyle(index) {
        var topMenu = $api.byId('top-menu');
        var divs = $api.domAll(topMenu, 'div');
        api.setFrameGroupIndex({
            name: frameNames[2],
            index: index,
            scroll: true
        });
        for (var i = 0; i < divs.length; i++) {
            if (i == index) {
                $api.addCls(divs[i], 'active');
            } else {
                $api.removeCls(divs[i], 'active');
            }
        }
    }
    var menus, headers, headerHeight, footerHeight, headerTop;
    var navigationBar, home_group_id, video_group_id;

    function fnInit() {
        var header = $api.byId('header');
        var menus = $api.byId('menus');
        var menus1 = $api.byId('menus-1');
        headerHeight = $api.offset(header).h;
        headerTop = $api.offset(header).w;
        menusHeight = $api.offset(menus).h;
        menusTop = $api.offset(menus).w;
        menus1Height = $api.offset(menus1).h;
        menus1Top = $api.offset(menus1).w;
    };

    function test() {
        var NVNavigationBar = api.require('NVNavigationBar');

        NVNavigationBar.open({
            rect: {
                x: 0,
                y: 0,
                w: menusTop,
                h: headerHeight,
            },
            styles: {
                orientation: 'horizontal',
                bg: '#6b6b6b',
                bgAlpha: 1,
                font: {
                    size: 14,
                    sizeSelected: 18,
                    color: '#FFFFFF',
                    colorSelected: '#ff0000',
                    alpha: 1
                },
                itemSize: {
                    w: 90,
                    h: 44
                }
            },
            items: [{
                title: '全部',
                bg: '#FFE7BA',
                bgSelected: '#ff0000'
            }, {
                title: '男装',
                bg: '#FFE1FF',
                bgSelected: '#FFA500'
            }, {
                title: '女装',
                bg: '#FFAEB9',
                bgSelected: '#FFA500'
            }, {
                title: '标题四',
                bg: '#CDCD00',
                bgSelected: '#FFA500'
            }, {
                title: '标题五',
                bg: '#BBFFFF',
                bgSelected: '#FFA500'
            }, {
                title: '标题六',
                bg: '#436EEE',
                bgSelected: '#FFA500'
            }],
            selectedIndex: 1,
            fixedOn: api.frameName,
            id: 'first'
        }, function(ret, err) {
            api.alert({
                msg: JSON.stringify(ret)
            });
        });
    }
</script>

</html>
